<template>
  <section class="component origanize-node">
    <div draggable="true" @dragstart.stop="handleDragStart($event)" @dragenter="handleDragEnter" @dragleave="handleDragLeave" @dragover.prevent="handleDragOver" @drop.stop="handleDrop($event)" @dragend.prevent="handleDragEnd" id="tree-node" :style="getSubTreeStyle()">
      <div>
        <a @click="expanedItemHandle" v-show="!data.isLeaf">
          <svg-icon :iconName="expanded?'xiangxia':'xiangyou'" :iconSize='defaultIconSize'></svg-icon>
        </a>
        <a @click="selectItemHandle" style="text-decoration:none" :style="getSubTextStyle()">{{data.deptName}}</a>
        <small v-show="rootNode && rootNode.selectDepartmentNode == data" class="icon-box">
          <a @click="editItemHandle">
            <svg-icon iconName="edit" :iconSize='defaultIconSize'></svg-icon>
          </a>
          <a @click="addItemHandle">
            <svg-icon iconName="plus" :iconSize='defaultIconSize'></svg-icon>
          </a>
          <a @click="removeItemHandle">
            <svg-icon iconName="minus" :iconSize='defaultIconSize'></svg-icon>
          </a>
        </small>
      </div>
      <div v-show="expanded" class="sub-node" v-if="data.children">
        <origanize-node v-for="(item) in data.children" :key="item.id" :data="item"></origanize-node>
      </div>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Mutation, Getter } from "vuex-class";
import { Emit, Prop, Watch } from "vue-property-decorator";
import SvgIcon from "~/components/common/svg-icon.vue";

@Component({
  components: {
    SvgIcon
  }
})
export default class OriganizeNode extends Vue {
  private rootNode: any = {}; // 根节点对象
  private isDraged: boolean = false; // 节点展开状态
  private showOprators: boolean = false;
  private expanded: boolean = true; // 默认展开
  private defaultIconSize: number = 14;
  @Prop() data: any; //  此节点实例上需要的数据，从父节点来

  // /**
  //  * 当前节点是否被选中
  //  */
  // get selected() {
  //   return this.rootNode.selected === this.data;
  // }

  getSubTextStyle() {
    return {
      // 使用/2 是因为上级菜单用了em级别，-1 是因为svg本来有个1px的边框
      marginLeft:
        (this.data.isLeaf === true ? this.defaultIconSize / 2 - 1 : 0) + "px"
    };
  }

  getSubTreeStyle() {
    return {
      marginLeft: this.data.isLeaf === true ? "2em" : "1em",
      marginTop: "3px"
    };
  }
  /**
   * 节点展开处理
   */
  expanedItemHandle() {
    this.expanded = !this.expanded;
  }
  /**
   * 节点选择处理
   */
  selectItemHandle() {
    this.rootNode.updateSelected(this.data); // 更新选择元素
  }

  /**
   * 获取当前父元素
   */
  parent(flag = false) {
    let parent: any = this.$parent;
    // 向上寻找根节点元素
    while (
      parent &&
      parent.$options &&
      parent.$options.name !== "OriganizeTree"
    ) {
      parent = parent.$parent;
    }
    return parent;
  }

  /**
   * 修改节点处理
   */
  editItemHandle() {
    this.rootNode.$emit("edit", this.data);
  }

  /**
   * 添加节点处理
   */
  addItemHandle() {
    this.rootNode.$emit("add", this.data);
  }
  /**
   * 删除节点处理
   */
  removeItemHandle() {
    this.rootNode.$emit("remove", this.data);
  }
  /**
   * 拖动逻辑处理
   */
  handleDrop(e) {
    // 获取原始节点
    const vm = window["dropNode"];
    const localEL= <HTMLElement>this.$el

    localEL.style.backgroundColor = "";
    vm.$el.style.backgroundColor = "";

    let __parent__: any = this;
    while (__parent__ !== undefined) {
      if (__parent__ === vm) {
        return;
      }
      __parent__ = __parent__.$parent;
    }

    const currentNode = vm.node;

    // 目标节点与原节点相同直接退出
    // if (vm.$parent.node.depId === this.node.depId) {
    //   return
    // }
    // 从原节点子元素中删除对象
    vm.$parent.node.children = vm.$parent.node.children.filter(
      node => node !== currentNode
    );
    // 添加到目标对象子元素中
    if (!this.data.children) {
      this.data.children = [];
    }
    this.data.children.push(currentNode);
    this.data.isLeaf = false;
    this.data.expand = true;
    // 更新新的父ID
    currentNode.pid = this.data.id;
    // 父节点强制刷新
    this.parent().forceRefresh();
    this.parent().$emit("drag", currentNode, vm.$parent.node, this.data);
  }
  handleDragEnd() {
    const localEL= <HTMLElement>this.$el
    localEL.style.backgroundColor = "";
  }
  handleDragStart(e) {
    this["show"] = false;
    this.isDraged = true;
    window["dropNode"] = this;
    const localEL= <HTMLElement>this.$el
    localEL.style.backgroundColor = "grey";
  }
  handleDragEnter() {
    if (!this.isDraged) {
      const localEL= <HTMLElement>this.$el
      localEL.style.backgroundColor = "";
    }
  }
  handleDragLeave() {
    if (!this.isDraged) {
      const localEL= <HTMLElement>this.$el
      localEL.style.backgroundColor = "";
    }
  }
  handleDragOver() { }
  showOprator() {
    this.showOprators = true;
  }
  hideOprators() {
    this.showOprators = false;
  }
  /**
   * 挂载处理逻辑 html页面挂在到根页面完成之后触发事件
   */
  mounted() {
    // 获取根节点
    this.rootNode = this.parent();
  }
}
</script>
<!-- Add "scoped " attribute to limit CSS to this component only -->
<style lang="less" scoped>
.component .origanize-node {
  font-size: 12px;
}
</style>
